<script setup lang="ts">
import { useStore }  from "vuex"
const store = useStore();
const user = store.state.user;
const role = store.state.role;
const fullName = window.sessionStorage.getItem('fullName')
</script>

<template>
    <div class="full-flex-column-layout account-active">
        <el-result icon="error" class="result">
            <template #title>
                <div class="title">账号待激活</div>
            </template>
            <template #subTitle>
                <div class="sub-title">
                    <div class="item">
                        <span class="lable">用户名：</span>
                        <span class="text">{{ user.name || fullName }}</span>
                    </div>
                    <div class="item">
                        <span>用户角色：</span>
                        <span>{{ role.name || '暂未选择' }}</span>
                    </div>
                </div>
            </template>
            <template #extra>
                <div class="tips">
                    <span>对不起，您的账户还未激活，请联系您的</span>
                    <span class="link">业务员</span>
                    <span>!</span>
                </div>
                <el-button type="primary">好的，我已知晓</el-button>
            </template>
        </el-result>
    </div>
</template>

<style lang="scss" scoped>
.account-active {
    justify-content: center;
    align-items: center;
    .result {
        --el-result-icon-font-size: 72px;
        --el-result-subtitle-margin-top: 16px;
        padding-bottom: 100px;
        .title {
            font-size: 24px;
            color: rgba(0, 0, 0, 0.85);
            line-height: 32px;
            font-weight: 500;
        }
        .sub-title {
            font-size: 14px;
            line-height: 22px;
            .item {
                margin-bottom: 6px;
                .lable {
                    color: rgba(0, 0, 0, 0.85);
                }
                .text {
                    color: rgba(0, 0, 0, 0.65);
                }
            }
        }
        .tips {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.43);
            line-height: 22px;
            margin-bottom: 30px;
            .link {
                color: #1890ff;
                cursor: pointer;
            }
        }
    }
}
</style>
